<template>
  <div class="home">
    <img src="@/assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <p @click="$store.commit('add')">counter:{{ $store.state.counter }}</p>
    <p @click="$store.dispatch('add')">
      async counter:{{ $store.state.counter }}
    </p>
    <!-- <p>double counter:{{$store.getters.doubleCounter}}</p> -->

    <el-table
      :data="tableData"
      height="400px"
      max-height="400px"
      size="small"
      row-class-name="row"
      cell-class-name="column"
      :row-style="setRowStyle"
      :cell-style="setColumnStyle"
      :highlight-current-row="true"
      fit
    >
      <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index"
        :prop="item.prop"
        :width="item.width"
        :label="item.label"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleGoods(scope.row)"
            v-if="item.isOpera"
            >{{ scope.row[item.prop] }}</el-button
          >
          <div v-else>{{ scope.row[item.prop] }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld,
  },
  data() {
    return {
      tableLabel: [
        { label: "", width: "40", prop: "id" },
        { label: "农户名称", width: "", prop: "name", isOpera: true },
        { label: "所属中心店", width: "", prop: "shop", isOpera: true },
        { label: "性别", width: "", prop: "sex" },
        { label: "电话", width: "", prop: "phone" },
        { label: "所在地区", width: "", prop: "area" },
        { label: "土地面积(亩)", width: "", prop: "acreage" },
        { label: "累计购买数量(T)", width: "", prop: "quantity" },
        { label: "累计购买金额(元)", width: "", prop: "money" },
        { label: "是否管理端添加", width: "", prop: "add" },
      ],
      tableData: [
        {
          id: 1,
          name: "中国男",
          shop: "阳光超市",
          sex: "男",
          phone: 18383929383,
          area: "华北",
          acreage: 90,
          quantity: 444,
          money: 34534,
          add: "是",
        },
        {
          id: 2,
          name: "ADS",
          shop: "sd",
          sex: "s",
          phone: 18383929383,
          area: "华北",
          acreage: 90,
          quantity: 444,
          money: 34534,
          add: "是",
        },
      ],
    };
  },
  // created () {
  //   this.$store.state = {};
  // },
};
</script>
